<template>
  <div class="product-container">
    <div class="left-menu">
      <h2>资源联盟</h2>
      <Menu
        style="width: 200px;"
        :selected-keys="[reviewMenu]"
        mode="inline"
        @click="handleClickMenu"
      >
        <MenuItem v-for="{ dictLabel, dictValue } in dicts.resourceLeagueMenu" :key="dictValue">
          {{ dictLabel }}
        </MenuItem>
      </Menu>
    </div>

    <div class="table-container">
      <ProductLibrary v-if="reviewMenu == ResourceLeagueMenu.PRODUCTLIBRARY"></ProductLibrary>
      <ProductAudit v-if="reviewMenu == ResourceLeagueMenu.PRODUCTAUDIT"></ProductAudit>
      <SelectedPlate v-if="reviewMenu == ResourceLeagueMenu.SELECTEDPLATE"></SelectedPlate>
      <LeagueOrganization v-if="reviewMenu == ResourceLeagueMenu.LEAGUEORGANIZATION"></LeagueOrganization>
      <OrdersStatistics v-if="reviewMenu == ResourceLeagueMenu.ORDERSSTATISTICS"></OrdersStatistics>
      <!-- <DataStatistics v-if="reviewMenu == ResourceLeagueMenu.DATASTATISTICS"></DataStatistics> -->
      <LeagueConfig v-if="reviewMenu == ResourceLeagueMenu.LEAGUECONFIG"></LeagueConfig>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { Menu, MenuItem } from 'ant-design-vue';
  import { ResourceLeagueMenu } from '@/enums/resourceLeague';
  import ProductLibrary from "./productLibrary/index.vue";
  import ProductAudit from "./productAudit/index.vue";
  import SelectedPlate from "./selectedPlate/index.vue";
  import LeagueOrganization from "./leagueOrganization/index.vue";
  import OrdersStatistics from "./ordersStatistics/index.vue";
  import DataStatistics from "./dataStatistics/index.vue";
  import LeagueConfig from "./leagueConfig/index.vue";
  import { usePagesStore } from '@/store/modules/pages';

  const dicts = Dictionary.getLocalMulti([
    'resourceLeagueMenu',
  ]);
  
  const reviewMenu = ref(ResourceLeagueMenu.PRODUCTLIBRARY);
  
  function setDefault() {
    const { resourceLeagueCurrentMenu } = usePagesStore();
    reviewMenu.value = resourceLeagueCurrentMenu;
  };
  setDefault();
  const handleClickMenu = ({ key }) => {
    const { setResourceLeagueCurrentMenu } = usePagesStore();
    reviewMenu.value = key;
    setResourceLeagueCurrentMenu(reviewMenu.value)
  };
</script>

<style lang="less" scoped>
  .product-container {
    display: flex;
    padding-top: 10px;
    padding-left: 10px;

    .left-menu {
      background-color: white;

      h2 {
        padding: 10px 16px;
        padding-bottom: 0;
        font-weight: bold;
      }
    }
    .table-container {
      width: calc(100% - 200px);
      max-width: calc(100% - 200px);
    }
  }
</style>
